<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>澳琳第二次作业</title>
    <script>   
        var row=prompt("请输入生成所有图形的边长");
        if(row==0){
            exit(); 
        }
        function triangle(line){
            if(line==1){
                document.write("*");
                return;
            }
            var o,p;
            for(o=0;o<line;o++){
			    p=line-1;
			    for(p=p-o;p>0;p--){     //三角形前面的空格控制
				    document.write("&nbsp");
			    }
                for(var i=0;i<o+1;i++){
                    document.write("*&nbsp");
                }
                document.write("<br>");
            }
        }
        function parallelogram(line){//生成平行四边形的函数方法
            if(line==1){
                document.write("*");
                return;
            }
            var i,j;
            for(i=0;i<line;i++){
                j=line-1;
                for(j=j-i;j>0;j--){
                    document.write("&nbsp");
                }
                for(var p=0;p<line;p++){
                    document.write("*&nbsp");
                }
                document.write("<br>");
            }
        }
        function rhombus(line){ //生成菱形的函数方法，我控制的是前面的空格数，由老师给的图形来看，我肯定没问题，但是浏览器的空格太小，导致我如果要1，3，5，7这样排列的菱形，
            var i,j,z,n;        //必然导致浏览器显示出来会畸形，但是算法没问题。
            line=line*2-1;      //让给定边长×2-1就得到了总的行数。
	        line = line / 2 +1;     //行数除以二向下取整+1就是上正三角的生成
	        for(i=1,n=1; i<= line; i++){
		        n = 2*i-1;
		        for(j=line-i; j>0; j--){
			        document.write("&nbsp");
		        }
		        for(z=0; z< n; z++){
			        document.write("*&nbsp");
		        }
		        document.write("<br>");
	        }
	        n-=2;       //每一层是递减2
	        for(i=0; i<line-1; i++){
                for(j=0; j<=i+1; j++){
			        document.write("&nbsp");
		        }
		        for(z=n-2*i; z>0; z--){
			        document.write("*&nbsp");
		        }
		        document.write("<br>");
	        }
	        return;
        }
        triangle(row);//调用生成给定边长的正三角形函数
        document.write("<br><br><br>");
        parallelogram(row);//调用生成给定边长的平行四边形
        document.write("<br><br><br>");
        rhombus(row);//调用生成给定边长的菱形
        document.write("<br><br><br>");
                                        //经过几十个测试，看着视觉不行，但是逻辑完全正确，如果要去实现视觉的正确，还得一个一个测试，试出浏览器和正常空格的偏差。
		                                //由于浏览器隔行的距离太大的问题，是所以不管有没有空格，都会出现正三角像歪的等腰三角形还有菱形的畸形。
    </script>
</head>
<body>
</body>
</html>